<template>
  <div id="login">
    <v-xheader inlogin="1"></v-xheader>
    <div class="dis60"></div>
    <div class="login-wrap">
      <div class="login-form-wrap" >
        <ul class="login-tab">
          <li class="cur">账户注册</li>
        </ul>
        <div class="dis20"></div>
        <el-form :model="registerForm"
                :rules="registerRules"
                ref="registerForm">
          <el-form-item prop="mobile">
            <el-input type="text"
                      :maxlength="30"
                      placeholder="手机号"
                      v-model="registerForm.mobile">
            </el-input>
          </el-form-item>
          <el-form-item prop="upass">
            <el-input type="password"
                      :maxlength="16"
                      placeholder="密码"
                      v-model="registerForm.upass">
            </el-input>
          </el-form-item>
          <el-form-item prop="upass2">
            <el-input type="password"
                      :maxlength="16"
                      placeholder="确认密码"
                      v-model="registerForm.upass2">
            </el-input>
          </el-form-item>
          <el-form-item>
            <div id="geecase"></div>
          </el-form-item>
          <el-form-item prop="rzcode">
            <el-input v-model="registerForm.rzcode">
              <el-button slot="append"
                         class="font-blackgr"
                         :disabled="code_status"
                         @click.prevent="send_code">
                {{ code_wait>0 ? code_wait + '秒后重新获取' : '获取验证码' }}
              </el-button>
            </el-input>
          </el-form-item>
            <!--<el-checkbox v-model="checked">记住密码</el-checkbox>-->
          <!--<div class="dis15"></div>-->
          <el-form-item>
            <el-button type="primary" style="width:100%;"
                      @click="submitForm">
                      <!--:class="{'disabled': btnDisabled}"-->
                      立即注册
            </el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right;font-size: 12px;">
          <router-link to="/login">
            <span class="font-gray">已经注册?</span> <span class="font-blue">返回登录</span>
          </router-link>
        </div>
        <div class="dis10"></div>

      </div>
    </div>
  </div>
</template>
<script>
import {
  saveToken,
} from '@cache'
import {
  mapActions,
  mapGetters
} from 'vuex'
import cache from '@cache'
export default {
  name: 'register',
  data () {
    const validateUname = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号'))
        return false
      }
      if (!this.is_mobile(value)) {
        callback(new Error('请输入正确的手机号格式'))
        return false
      }
      callback()
    }
    const validateUpass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请填写确认密码'))
        return false
      }
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
        return false
      }
      if (value !== this.registerForm.upass) {
        callback(new Error('两次密码输入不一致'))
        return false
      }
      callback()
    }
    const validateRzcode = (rule, value, callback) => {
//      if (!this.isClickGet) {
        if (!this.is_mobile(this.registerForm.mobile) ) {
          callback(new Error('请输入正确的手机号格式'))
          return false
        }
//      }
      if (!this.registerForm.captcha) {
        callback(new Error('请先点击按钮验证'))
        return false
      }
      if (!this.isClickGet) {
        if (!value||value.length!=6) {
          callback(new Error('请输入6位验证码'))
          return false
        }
      }
      callback()
    }
    return {
      timeout: 60,
      isClickGet: false, // 是否点击获取验证
      registerForm: {
        mobile: '',
        upass: '',
        upass2:"",
        captcha: false, //极验校验,
        rzcode:''
      },
      code_wait: 0,
      code_status:false,

      registerRules: {
        mobile: [
          { validator: validateUname, trigger: 'blur' }
        ],
        upass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码不能少于6位', trigger: 'blur' }
        ],
        upass2: [
          { validator: validateUpass2, trigger: 'blur' }
        ],
        rzcode: [
          { validator: validateRzcode, trigger: 'blur' }
        ],
      },
      message: ''
    }
  },
  computed: {
    ...mapGetters([
      'userinfo',
      'isLogin'
    ]),
  },
  methods: {
    ...mapActions([
      'signLogIn'
    ]),
    submitForm () {
      const self = this;  // 记住密码
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          this.$api.post('account.register',this.registerForm).then(res=>{
              if(res.status===1){
                this.$success(res.msg)
                saveToken(res.data.token, res.data.expiry)
                this.$store.commit('IS_LOGIN', true)
                this.$router.push({'path':'/'})
              }else{
                  this.$error(res.msg)
              }

          })
//            .then((res) => {
//              if (res.status !== 1) {
//                this.$error(res.msg)
//              }else{
////                cache.set('uname', this.registerForm.uname)
////                this.$success(res.msg)
////                this.$router.push({'path':'/home'})
//              }
//            })
        } else {
          return false
        }
      })
    },
    geeYz () { // 极验验证
      let that = this
      that.$api.post('account.validate/init').then((res) => {
        if (res.status === 1) {
          window.initGeetest({
            product: 'popup',
            // 以下配置参数来自服务端 SDK
            gt: res.data.gt,
            challenge: res.data.challenge,
            offline: !res.data.success,
            new_captcha: res.data.new_captcha,
            width: '300px'
          }, that.callGeeYz)
        }
      })
    },
    callGeeYz (captchaObj) { // 调用极验验证
      let that = this
      // 这里可以调用验证实例 captchaObj 的实例方法
      captchaObj.appendTo('#geecase')
      captchaObj.onSuccess(function () {
        var result = captchaObj.getValidate()
        if (!result) {
//          that.$message.error('请先完成验证')
        }
        that.$api.post('account.validate/check', result).then((res) => {
          if (res.status === 1) {
            that.registerForm.captcha = true
          }
        })
      })
      captchaObj.onError(function () {
//        that.$Message.error('验证出错,请稍后重试')
      })
    },
    //获取手机验证码
    send_code(){
        let that=this
        this.isClickGet=true
        let waittime = () => {
          if (that.code_wait > 0) {
            that.code_wait = that.code_wait - 1
            setTimeout(function () {
              waittime()
            }, 1000)
          } else {
            that.code_wait = 0
            that.code_status = false
          }
        }

        that.$refs.registerForm.validateField('rzcode', function (valid) {
          if(!valid&& that.code_wait == 0){
              let params = {
                mobile:that.registerForm.mobile,
                captcha:that.registerForm.captcha
              }
              that.$api.post("account.send_reg_code",params).then(res=>{
                if(res.status===1){
                  that.isClickGet = false
                  that.code_status = true
                  that.code_wait = 60
                  waittime()
                  that.$success("发送成功")

                }else{
                    that.$error(res.msg)

                }
              })

          }

        })
    },
    is_mobile(v){
        return /^1\d{10}$/.test(v)
    },

//    "account.register"




  },
  mounted () {
    this.geeYz()
  },


}
</script>
<style lang="scss">
#login {height:100%;background-size:cover;}
.login-wrap {width: 420px;margin: 0px auto;}
.login-form-wrap {background-color:#fff;padding: 50px 60px; border-radius: 0px;}
ul.login-tab {border-bottom:solid 1px #efefef;}
ul.login-tab li {display:inline-block; padding: 0 12px; height: 32px; line-height:32px;}
ul.login-tab li.cur {color:#212121;font-weight: 700;border-bottom:solid 2px #777;}
</style>
